<template>

	<div @mousemove="getMousePosition"  class="container">
		
			x:{{x}} <br>
			
			y:{{y}} <br>
			
			<button @click="btnClick">可以点击的按钮	</button> <br>
			<button @click="btnClick(1)">可以点击的按钮1	</button> <br>
			<button @click="btnClick(2)">可以点击的按钮2	</button> <br>
			<button @click="btnClick(3)">可以点击的按钮3	</button> <br>
			<button @click="btnClick(4)">可以点击的按钮4	</button> <br>
			<button @click="btnClick(5)">可以点击的按钮5	</button> <br>
			<button @click="btnClick(6)">可以点击的按钮6	</button> <br>
			
			
			<div v-html="message"></div>
	</div>
	
	
</template>

<script>
	
	
	export default{
		name:'MyMethod',
		data(){
			return {
				x:0,
				y:0,
				message:''
			}
		},
		// 方法
		methods:{
			getMousePosition(event){
				this.x = event.x;
				this.y =  event.y
			},
			btnClick(param){
				console.log(this)
				this.message +='<br>'+'按钮被点击了'+(param?param:'');
			}
			
		}
	}
	
	
</script>

<style scoped>
	
	/**  v --> viewport */
	.container{
		margin: 50px;
		background-color: azure;
		width: 100vw;
		height: 100vh;
	}
	
	
</style>